<template>
    <div class="comment-editor">
        <el-input
            v-model="textarea"
            resize="none"
            type="textarea"
            id="textarea"
            rows="5"
        ></el-input>
        <div class="opration">
            <el-popover width="420" trigger="click">
                <div class="emoji-list">
                    <el-tooltip
                        v-for="(item, index) in emojiList"
                        :key="item.id"
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                    >
                        <a
                            href="javascript:void(0)"
                            class="emoji-item"
                            @click="getEmoji(index)"
                        >
                            {{ item.char }}
                        </a>
                    </el-tooltip>
                </div>
                <div slot="reference" class="emoji-panel-open">
                    <img src="~/assets/images/face.png" />
                </div>
            </el-popover>
        </div>
        <div class="btn-wrap">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Emojis from "./emoji.json";

export default {
    name: "new-emojis",
    data() {
        return {
            emojiList: [],
            textarea: "",
        };
    },
    mounted() {
        this.emojiList = Emojis;
    },
    methods: {
        getEmoji(index) {
            let textArea = this.textarea;
            let srt = this.emojiList[index].char;
            this.textarea = textArea + srt;
        },
    },
    watch: {
        textarea(value) {
            this.$emit("input", value);
        },
    },
};
</script>